<template>
  <div>
    <div class="tie-bg flex items-center px-10">
      <div class="header mb-16px flex-shrink-0 w-full">
        <div class="flex justify-between items-center">
          <div>
            <h1 class="text-26px font-bold text-gray-800 mt-4" style="color: #fff;">{{ greetings }}，欢迎使用 智动力 智能报价系统</h1>
          </div>
          <div class="text-right">
            <div class="text-18px text-white font-bold mb-9">{{ currentTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 p-4" style="background-color: #F2F2F2; padding: 8px 10px;">

      <!-- 关键指标卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2 mb-2">
        <!-- 生产数量卡片 - 红色系（匹配库存分析红色） -->
        <div class="card-gradient-red p-3 text-white shadow-md rounded">
          <div class="flex justify-between items-start">
            <div style="width: 100%;">
              <p class="text-sm font-medium opacity-90">生产数量</p>
              <h3 class="text-2xl font-bold mt-1 text-center" style="color: #fff; margin-left: 25px;">195万</h3>
              <p class="text-xs mt-1 flex items-center">
                <span>完成率: 89%</span>
              </p>
            </div>
            <div class="bg-white/20 p-2 rounded-lg">
              <i class="fa fa-cube text-lg"></i>
            </div>
          </div>
        </div>

        <!-- 销售额卡片 - 蓝色系（匹配销售额图表蓝色） -->
        <div class="card-gradient-blue p-3 text-white shadow-md rounded">
          <div class="flex justify-between items-start">
            <div style="width: 100%;">
              <p class="text-sm font-medium opacity-90">销售额</p>
              <h3 class="text-2xl font-bold mt-1 text-center" style="color: #fff; margin-left: 25px;">2.98亿</h3>
              <p class="text-xs mt-1 flex items-center">
                <span>完成率: 91%</span>
              </p>
            </div>
            <div class="bg-white/20 p-2 rounded-lg">
              <i class="fa fa-shopping-bag text-lg"></i>
            </div>
          </div>
        </div>

        <!-- 采购金额卡片 - 青色系（匹配采购数量绿色） -->
        <div class="card-gradient-teal rounded p-3 text-white shadow-md">
          <div class="flex justify-between items-start">
            <div style="width: 100%;">
              <p class="text-sm font-medium opacity-90">采购金额</p>
              <h3 class="text-2xl font-bold mt-1 text-center" style="color: #fff; margin-left: 25px;">0.45亿</h3>
              <p class="text-xs mt-1 flex items-center">
                <span>完成率: 75%</span>
              </p>
            </div>
            <div class="bg-white/20 p-2 rounded-lg">
              <i class="fa fa-truck text-lg"></i>
            </div>
          </div>
        </div>

        <!-- 库存周转率卡片 - 紫色系 -->
        <div class="card-gradient-purple rounded p-3 text-white shadow-md">
          <div class="flex justify-between items-start">
            <div style="width: 100%;">
              <p class="text-sm font-medium opacity-90">库存周转率</p>
              <h3 class="text-2xl font-bold mt-1 text-center" style="color: #fff; margin-left: 35px;">4.2</h3>
              <p class="text-xs mt-1 flex items-center">
                <i class="fa fa-refresh mr-1"></i>
                <span>同比: +0.3</span>
              </p>
            </div>
            <div class="relative w-10 h-10">
              <div class="absolute inset-0 rounded-full bg-white/20 flex items-center justify-center">
                <i class="fa fa-repeat text-lg"></i>
              </div>
              <svg class="absolute inset-0" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="8"/>
                <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="8"
                        stroke-dasharray="251.2" stroke-dashoffset="63" transform="rotate(-90 50 50)"/>
              </svg>
            </div>
          </div>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-2">
        <!-- 左侧：产品库存分析 -->
        <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
          <h3 class="text-base font-semibold text-[#333333] mb-2">产成品库存分析</h3>

          <!-- 环形图 -->
          <div class="relative h-45 flex items-center justify-center">
            <div class="absolute font-bold text-[#555656]" style="margin-left: 70%; margin-top: -90px;">库龄范围</div>
            <div ref="inventoryChart" class="w-full h-full"></div>
          </div>

          <!-- 仓库位置表格 -->
          <div class="mt-3">
            <div class="border border-gray-200 rounded" style="height: 250px; display: flex; flex-direction: column;">
              <SortableTable
                :data="warehouseData"
                :columns="warehouseColumns"
                @sort-change="handleWarehouseSort"
                :row-style="{ minHeight: '30px' }"
                :header-style="{ color: '#fff', height: '35px', 'line-height': '35px' }"
                :sticky-header="true"
              >
                <template #column-warehouse="{ item }">
                  <div class="py-1 px-2 text-[#333333] text-center">{{ item.warehouse }}</div>
                </template>

                <template #column-amount="{ item }">
                  <div class="py-1 px-2 text-[#333333] text-center">{{ item.amount }}</div>
                </template>

                <template #column-utilization="{ item }">
                  <div class="py-1 px-2 text-[#333333] text-center">{{ item.utilization }}</div>
                </template>
              </SortableTable>
            </div>
          </div>
        </div>

        <!-- 右侧：销售和采购分析 -->
        <div class="lg:col-span-2 space-y-2">
          <!-- 销售额及完成率月度趋势 -->
          <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
            <h3 class="text-base font-semibold text-[#333333]">销售额及完成率月度趋势</h3>
            <div ref="salesTrendChart" class="h-50"></div>
          </div>

          <!-- 各产品采购金额/数量/完成率 -->
          <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
            <h3 class="text-base font-semibold text-[#333333]">各产品采购金额/采购数量/完成率</h3>
            <div ref="purchaseChart" class="h-50"></div>
          </div>
        </div>
      </div>

      <!-- 新增底部区域：ABC库存金额、生产计划完成分析、生产线分析 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-2 mt-2">
        <!-- ABC库存金额柱状图 -->
        <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
          <h3 class="text-base font-semibold text-[#333333] mb-2">ABC库存金额</h3>
          <div ref="abcInventoryChart" class="h-52"></div>
        </div>

        <!-- 生产计划完成分析折线图 -->
        <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
          <h3 class="text-base font-semibold text-[#333333] mb-2">生产计划完成分析</h3>
          <div ref="productionPlanChart" class="h-52"></div>
        </div>

        <!-- 生产线分析表格 -->
        <div class="bg-white shadow-md p-3" style="border-radius: 4px;">
          <h3 class="text-base font-semibold text-[#333333] mb-2">生产线分析</h3>
          <div style="height: 200px; display: flex; flex-direction: column;" class="border border-gray-200 rounded">
            <SortableTable
              :data="productionLineData"
              :columns="productionLineColumns"
              :sort-state="productionLineSortState"
              @sort-change="handleProductionLineSort"
              :row-style="{ minHeight: '30px' }"
              :header-style="{ color: '#fff', height: '35px', 'line-height': '35px' }"
              :sticky-header="true"
            >
              <template #column-line="{ item }">
                <div class="py-1 px-2 text-[#333333] text-center">{{ item.line }}</div>
              </template>

              <template #column-plan="{ item }">
                <div class="py-1 px-2 text-[#333333] text-center">{{ item.plan }}</div>
              </template>

              <template #column-completion="{ item }">
                <div class="py-1 px-2 text-[#333333] text-center">{{ item.completion }}</div>
              </template>
            </SortableTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onActivated, onDeactivated } from 'vue';
import * as echarts from 'echarts';
import { left } from '@antv/x6/lib/registry/port-layout/line';
import { SortableTable } from '@/components/custom';

// 图表容器引用
const inventoryChart = ref(null);
const salesTrendChart = ref(null);
const purchaseChart = ref(null);
const abcInventoryChart = ref(null); // 新增ABC库存金额图表引用
const productionPlanChart = ref(null); // 新增生产计划完成分析图表引用
const currentTime = ref('');
const greetings = ref('');

// 图表实例引用
const chartInstances = ref({});

// 表格列定义
const warehouseColumns = ref([
  { key: 'warehouse', label: '仓库位置', width: '33.33%' },
  { key: 'amount', label: '库存总金额', width: '33.33%' },
  { key: 'utilization', label: '仓库利用率', width: '33.33%' }
]);

const productionLineColumns = ref([
  { key: 'line', label: '生产线', width: '33.33%' },
  { key: 'plan', label: '计划产量', width: '33.33%' },
  { key: 'completion', label: '完成率', width: '33.33%' }
]);

// 表格数据
const warehouseData = ref([
  { warehouse: '北京', amount: '457,913', utilization: '55%' },
  { warehouse: '广东', amount: '363,843', utilization: '45%' },
  { warehouse: '广西', amount: '457,799', utilization: '42%' },
  { warehouse: '河北', amount: '432,457', utilization: '36%' },
  { warehouse: '上海', amount: '521,389', utilization: '68%' },
  { warehouse: '浙江', amount: '387,652', utilization: '52%' },
  { warehouse: '江苏', amount: '412,567', utilization: '48%' },
  { warehouse: '山东', amount: '398,721', utilization: '44%' },
  { warehouse: '河南', amount: '324,567', utilization: '39%' },
  { warehouse: '四川', amount: '287,432', utilization: '35%' },
  { warehouse: '湖北', amount: '312,876', utilization: '41%' }
]);

const productionLineData = ref([
  { line: '生产线A', plan: '12,000', completion: '92%' },
  { line: '生产线B', plan: '15,000', completion: '87%' },
  { line: '生产线C', plan: '10,500', completion: '95%' },
  { line: '生产线D', plan: '18,000', completion: '89%' },
  { line: '生产线E', plan: '9,800', completion: '91%' },
  { line: '生产线F', plan: '13,200', completion: '88%' },
  { line: '生产线G', plan: '11,500', completion: '93%' },
  { line: '生产线H', plan: '14,200', completion: '85%' },
  { line: '生产线I', plan: '9,600', completion: '90%' },
  { line: '生产线J', plan: '16,800', completion: '86%' },
  { line: '生产线K', plan: '12,300', completion: '94%' },
  { line: '生产线L', plan: '10,700', completion: '89%' },
  { line: '生产线M', plan: '13,500', completion: '91%' },
  { line: '生产线N', plan: '11,200', completion: '87%' },
  { line: '生产线O', plan: '15,600', completion: '92%' }
]);

// 原始数据备份，用于重置排序
const originalWarehouseData = [...warehouseData.value];
const originalProductionLineData = [...productionLineData.value];

// 排序状态
const warehouseSortState = ref({ field: '', order: '' });
const productionLineSortState = ref({ field: '', order: '' });

// 更新时间
const updateTime = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

  // 更新问候语
  const hour = now.getHours();
  if (hour < 6) {
    greetings.value = '深夜好';
  } else if (hour < 9) {
    greetings.value = '早上好';
  } else if (hour < 12) {
    greetings.value = '上午好';
  } else if (hour < 14) {
    greetings.value = '中午好';
  } else if (hour < 18) {
    greetings.value = '下午好';
  } else if (hour < 22) {
    greetings.value = '晚上好';
  } else {
    greetings.value = '夜深了';
  }
};

// 仓库表格排序处理
const handleWarehouseSort = (sortState) => {
  warehouseSortState.value = sortState;

  if (sortState.order) {
    warehouseData.value.sort((a, b) => {
      let aValue = a[sortState.field];
      let bValue = b[sortState.field];

      // 如果是数字字符串，转换为数字进行比较
      if (!isNaN(parseFloat(aValue)) && !isNaN(parseFloat(bValue))) {
        aValue = parseFloat(aValue.replace(/,/g, ''));
        bValue = parseFloat(bValue.replace(/,/g, ''));
      } else if (sortState.field === 'utilization' || sortState.field === 'completion') {
        // 处理百分比字符串
        aValue = parseFloat(aValue.replace('%', ''));
        bValue = parseFloat(bValue.replace('%', ''));
      }

      if (sortState.order === 'asc') {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });
  }
};

// 生产线表格排序处理
const handleProductionLineSort = (sortState) => {
  productionLineSortState.value = sortState;

  if (sortState.order) {
    productionLineData.value.sort((a, b) => {
      let aValue = a[sortState.field];
      let bValue = b[sortState.field];

      // 如果是数字字符串，转换为数字进行比较
      if (!isNaN(parseFloat(aValue)) && !isNaN(parseFloat(bValue))) {
        aValue = parseFloat(aValue.replace(/,/g, ''));
        bValue = parseFloat(bValue.replace(/,/g, ''));
      } else if (sortState.field === 'utilization' || sortState.field === 'completion') {
        // 处理百分比字符串
        aValue = parseFloat(aValue.replace('%', ''));
        bValue = parseFloat(bValue.replace('%', ''));
      }

      if (sortState.order === 'asc') {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });
  }
};

// 表格排序功能
const sortTable = (type, field) => {
  if (type === 'warehouse') {
    // 如果点击的是当前排序字段，则切换排序方式
    if (warehouseSortState.value.field === field) {
      if (warehouseSortState.value.order === 'asc') {
        warehouseSortState.value.order = 'desc';
      } else {
        warehouseSortState.value.order = 'asc';
      }
    } else {
      // 点击新字段，默认升序
      warehouseSortState.value.field = field;
      warehouseSortState.value.order = 'asc';
    }

    // 根据排序状态对数据进行排序
    if (warehouseSortState.value.order) {
      warehouseData.value.sort((a, b) => {
        let aValue = a[field];
        let bValue = b[field];

        // 如果是数字字符串，转换为数字进行比较
        if (!isNaN(parseFloat(aValue)) && !isNaN(parseFloat(bValue))) {
          aValue = parseFloat(aValue.replace(/,/g, ''));
          bValue = parseFloat(bValue.replace(/,/g, ''));
        } else if (field === 'utilization' || field === 'completion') {
          // 处理百分比字符串
          aValue = parseFloat(aValue.replace('%', ''));
          bValue = parseFloat(bValue.replace('%', ''));
        }

        if (warehouseSortState.value.order === 'asc') {
          return aValue > bValue ? 1 : -1;
        } else {
          return aValue < bValue ? 1 : -1;
        }
      });
    }
  } else if (type === 'production') {
    // 如果点击的是当前排序字段，则切换排序方式
    if (productionLineSortState.value.field === field) {
      if (productionLineSortState.value.order === 'asc') {
        productionLineSortState.value.order = 'desc';
      } else {
        productionLineSortState.value.order = 'asc';
      }
    } else {
      // 点击新字段，默认升序
      productionLineSortState.value.field = field;
      productionLineSortState.value.order = 'asc';
    }

    // 根据排序状态对数据进行排序
    if (productionLineSortState.value.order) {
      productionLineData.value.sort((a, b) => {
        let aValue = a[field];
        let bValue = b[field];

        // 如果是数字字符串，转换为数字进行比较
        if (!isNaN(parseFloat(aValue)) && !isNaN(parseFloat(bValue))) {
          aValue = parseFloat(aValue.replace(/,/g, ''));
          bValue = parseFloat(bValue.replace(/,/g, ''));
        } else if (field === 'utilization' || field === 'completion') {
          // 处理百分比字符串
          aValue = parseFloat(aValue.replace('%', ''));
          bValue = parseFloat(bValue.replace('%', ''));
        }

        if (productionLineSortState.value.order === 'asc') {
          return aValue > bValue ? 1 : -1;
        } else {
          return aValue < bValue ? 1 : -1;
        }
      });
    }
  }
};

// 初始化所有图表
const initAllCharts = () => {
  initInventoryChart();
  initSalesTrendChart();
  initPurchaseChart();
  initAbcInventoryChart(); // 初始化ABC库存金额图表
  initProductionPlanChart(); // 初始化生产计划完成分析图表
};

// 重新渲染所有图表
const resizeAllCharts = () => {
  Object.values(chartInstances.value).forEach(chart => {
    if (chart) {
      chart.resize();
    }
  });
};

onMounted(() => {
  // 初始化时间
  updateTime();
  const timer = setInterval(updateTime, 1000);

  // 初始化所有图表
  initAllCharts();

  // 窗口 resize 适配
  window.addEventListener('resize', resizeAllCharts);
});

// 当组件被激活时（从其他页面返回时）
onActivated(() => {
  // 延迟执行以确保DOM已经渲染完成
  setTimeout(() => {
    // 重新渲染所有图表
    resizeAllCharts();

    // 如果图表实例不存在，重新初始化
    if (!chartInstances.value.inventoryChart) {
      initAllCharts();
    }
  }, 100);
});

// 当组件被停用时
onDeactivated(() => {
  // 可以在这里执行清理工作
});

// 产品库存分析环形图
function initInventoryChart() {
  if (chartInstances.value.inventoryChart) {
    chartInstances.value.inventoryChart.dispose();
  }

  const chart = echarts.init(inventoryChart.value);
  chartInstances.value.inventoryChart = chart;

  const option = {
     title: [
      {
        text: '平均库龄',
        subtext: '96',
        left: '39%',
        top: '36%',
        textAlign: 'center',
        textStyle: {
          fontSize: 16,
          fontWeight: 'bold',
          color: '#5B6891'
        },
        subtextStyle: {
          fontSize: 24,
          fontWeight: 'bold',
          color: '#5B6891'
        }
      },

    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        fontSize: 10,
        color: '#666'
      },
      data: [
        {
          name: '库龄范围',
          icon: 'none',
          textStyle: {
            fontSize: 10,
            color: '#333',
            fontWeight: 'bold'
          }
        },
        '<90',
        '180-360',
        '90-180'
      ]
    },
    series: [
      {
        name: '库龄占比',
        type: 'pie',
        radius: ['65%', '80%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 0,
          borderWidth: 0
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}\n{d}%',
          fontSize: 10,
          color: '#333'
        },
        labelLine: {
          show: true
        },
        data: [
          { value: 30, name: '<90', itemStyle: { color: '#43A4DB' } },
          { value: 25, name: '180-360', itemStyle: { color: '#4ECCDC' } },
          { value: 45, name: '90-180', itemStyle: { color: '#FE6F97' } }
        ]
      }
    ],
  };

  chart.setOption(option);
}

// 销售额及完成率月度趋势图
function initSalesTrendChart() {
  if (chartInstances.value.salesTrendChart) {
    chartInstances.value.salesTrendChart.dispose();
  }

  const chart = echarts.init(salesTrendChart.value);
  chartInstances.value.salesTrendChart = chart;

  const months = ['2019年1月', '2019年2月', '2019年3月', '2019年4月',
                 '2019年5月', '2019年6月', '2019年7月', '2019年8月',
                 '2019年9月', '2019年10月', '2019年11月', '2019年12月'];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: [
        {
          name: '完成率',
          icon: 'roundRect',
          textStyle: {
            fontSize: 10,
            color: '#666',
          }
        },
        {
          name: '销售额',
          icon: 'roundRect',
          textStyle: {
            fontSize: 10,
            color: '#666'
          }
        }
      ],
      top: 0,
      right: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '-2%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLabel: {
        fontSize: 8,
        rotate: 30,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '销售额',
        nameTextStyle: {
          fontSize: 10,
          color: '#666'
        },
        axisLabel: {
          formatter: '{value}M',
          color: '#666',
          fontSize: 8
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        }
      },
      {
        type: 'value',
        name: '完成率',
        nameTextStyle: {
          fontSize: 10,
          color: '#666'
        },
        position: 'right',
        max: 100,
        axisLabel: {
          formatter: '{value}%',
          color: '#666',
          fontSize: 8
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [12500, 11000, 12800, 12200, 12400, 12000, 11800, 12200, 12000, 12400, 12500, 12800],
        itemStyle: {
          color: '#4096ff'
        },
        barWidth: '60%',
        label: {
          show: true,
          // position: 'top',
          position: 'insideTop',
          formatter: '{c}M',
          fontSize: 8,
          color: '#333'
        }
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [97, 96, 98, 97.5, 97.8, 97.2, 97, 97.3, 97.1, 97.6, 97.5, 98],
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#fa8c16',
          width: 2
        },
        itemStyle: {
          color: '#fa8c16'
        },
        label: {
          show: false,
          position: 'top',
          formatter: '{c}%',
          fontSize: 8,
          color: '#333',
          offset: [0, 0]
        }
      }
    ]
  };

  chart.setOption(option);
}

// 采购分析图表
function initPurchaseChart() {
  if (chartInstances.value.purchaseChart) {
    chartInstances.value.purchaseChart.dispose();
  }

  const chart = echarts.init(purchaseChart.value);
  chartInstances.value.purchaseChart = chart;

  const products = ['产品1', '产品2', '产品3', '产品4', '产品5', '产品6', '产品7', '产品8', '产品9'];

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      // data: ['金额', '数量', '完成率'],
      data: [
        {
          name: '金额',
          icon: 'roundRect',
          textStyle: {
            fontSize: 10,
            color: '#666',
          }
        },
        {
          name: '数量',
          icon: 'roundRect',
          textStyle: {
            fontSize: 10,
            color: '#666'
          }
        },
        {
          name: '完成率',
          icon: 'roundRect',
          textStyle: {
            fontSize: 10,
            color: '#666'
          }
        }
      ],
      top: 0,
      right: 10,
      textStyle: {
        fontSize: 10,
        color: '#666'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: products,
      axisLabel: {
        fontSize: 10,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: [
      {
        type: 'value',
        name: '数值',
        nameTextStyle: {
          fontSize: 10,
          color: '#666'
        },
        axisLabel: {
          color: '#666',
          fontSize: 8
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          lineStyle: {
            color: '#f3f4f6'
          }
        }
      },
      {
        type: 'value',
        name: '完成率',
        nameTextStyle: {
          fontSize: 10,
          color: '#666'
        },
        position: 'right',
        max: 100,
        axisLabel: {
          formatter: '{value}%',
          color: '#666',
          fontSize: 8
        },
        axisLine: {
          lineStyle: {
            color: '#e5e7eb'
          }
        },
        splitLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '金额',
        type: 'bar',
        data: [6500, 4800, 7000, 6000, 5500, 6200, 4500, 7500, 5000],
        itemStyle: {
          color: '#4C89FF'
        },
        barWidth: '30%',
        label: {
          show: true,
          position: 'insideTop',
          formatter: '{c}',
          fontSize: 8,
          color: '#333'
        }
      },
      {
        name: '数量',
        type: 'bar',
        data: [7000, 6500, 6000, 500, 6800, 6300, 7200, 6600, 8000],
        itemStyle: {
          color: '#3AC2EF'
        },
        barWidth: '30%',
        label: {
          show: true,
          position: 'insideTop',
          formatter: '{c}',
          fontSize: 8,
          color: '#333'
        }
      },
      {
        name: '完成率',
        type: 'line',
        yAxisIndex: 1,
        data: [85, 87, 89, 87, 86, 88, 84, 83, 82],
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          color: '#FF8072',
          width: 2
        },
        itemStyle: {
          color: '#FF8072'
        },
        label: {
          show: false,
          position: 'top',
          formatter: '{c}%',
          fontSize: 8,
          color: '#333'
        }
      }
    ]
  };

  chart.setOption(option);
}

// ABC库存金额柱状图
function initAbcInventoryChart() {
  if (chartInstances.value.abcInventoryChart) {
    chartInstances.value.abcInventoryChart.dispose();
  }

  const chart = echarts.init(abcInventoryChart.value);
  chartInstances.value.abcInventoryChart = chart;

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['A类', 'B类', 'C类'],
      axisLabel: {
        fontSize: 10,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '金额(万元)',
      nameTextStyle: {
        fontSize: 10,
        color: '#666'
      },
      axisLabel: {
        color: '#666',
        fontSize: 8
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '库存金额',
        type: 'bar',
        data: [
          {
            value: 1200,
            itemStyle: { color: '#F4CE59' }
          },
          {
            value: 800,
            itemStyle: { color: '#0DC59F' }
          },
          {
            value: 450,
            itemStyle: { color: '#45B7D1' }
          }
        ],
        barWidth: '50%',
        label: {
          show: true,
          position: 'top',
          formatter: '{c}万',
          fontSize: 10,
          color: '#333'
        }
      }
    ]
  };

  chart.setOption(option);
}

// 生产计划完成分析折线图
function initProductionPlanChart() {
  if (chartInstances.value.productionPlanChart) {
    chartInstances.value.productionPlanChart.dispose();
  }

  const chart = echarts.init(productionPlanChart.value);
  chartInstances.value.productionPlanChart = chart;

  const months = ['1月', '2月', '3月', '4月', '5月', '6月'];

  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['计划产量', '实际产量'],
      top: 0,
      right: 10,
      textStyle: {
        fontSize: 10,
        color: '#666'
      }
    },
    grid: {
      left: '5%',
      right: '4%',
      bottom: '0%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLabel: {
        fontSize: 10,
        color: '#666'
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '产量(单位: 万件)',
      nameTextStyle: {
        fontSize: 10,
        color: '#666',
        // padding: [0, 0, 0, 50]
      },
      axisLabel: {
        color: '#666',
        fontSize: 10,
        margin: 20
      },
      axisLine: {
        lineStyle: {
          color: '#e5e7eb'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f3f4f6'
        }
      }
    },
    series: [
      {
        name: '计划产量',
        type: 'line',
        data: [23.5, 36.2, 33, 29.5, 34.0, 58.8],
        symbol: 'circle',
        symbolSize: 6,
        smooth: true,
        lineStyle: {
          color: '#4C89FF',
          width: 2
        },
        itemStyle: {
          color: '#4C89FF'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}万',
          fontSize: 8,
          color: '#333'
        }
      },
      {
        name: '实际产量',
        type: 'line',
        data: [11.8, 32.1, 12.5, 7.9, 27.2, 33.0],
        symbol: 'circle',
        symbolSize: 6,
        smooth: true,
        lineStyle: {
          color: '#FFCC00',
          width: 2
        },
        itemStyle: {
          color: '#FFCC00'
        },
        label: {
          show: true,
          position: 'insideTop',
          formatter: '{c}万',
          fontSize: 9,
          color: '#333'
        }
      }
    ]
  };

  chart.setOption(option);
}
</script>

<style scoped>
.tie-bg{
  background-image: url('@/assets/imgs/qs_bj4.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100px;
  position: relative;
  z-index: 0;
}
/* 自定义卡片渐变色 */
.card-gradient-red {
  background: linear-gradient(to right, #FF8467, #FE6CA0);
}

.card-gradient-blue {
  background: linear-gradient(to right, #8971EC, #3683C5);
}

.card-gradient-teal {
  background: linear-gradient(to right, #26B6C8, #119BD2);
}

.card-gradient-purple {
  background: linear-gradient(to right, #BC6AF1, #8363F9);
}

/* 表格样式修正 */
thead tr {
  background-color: #1F77B4 !important;
}

tbody tr td {
  color: #333 !important;
}

/* 表格字体大小调整 */
.table-header,
.table-cell {
  font-size: 13px; /* 从12px增加到13px */
}

/* 标题颜色修正 */
/* h3 {
  color: #333 !important;
  font-weight: 600 !important;
} */
</style>
